<template>
  <div class="channel-list">
    <div v-for="item in channels" :key="item.id" class="item">
        <Channel :data="item"></Channel>
    </div>
  </div>
</template>

<script>
    import Channel from "./Channel.vue"
    import Channels from "../services/channel"
    export default {
        components:{
            Channel,
        },
        data(){    
            return {
                channels:[],
            };
        },
        async created(){
            this.channels = await Channels.getChannels();
        },
    }

</script>

<style scoped>
    .item{
        float:left;
        width:50%;
    }
</style>